<template>
  <div>
     
       <div class="authcenter-body-login">
         <div class="title">登录</div>
         <div style="padding:10px 55px">
         <input placeholder="用户名" type="text"  v-model="ruleForm.userName" class="layout-lf">
         <input placeholder="密码" type="password" v-model="ruleForm.userPwd" class="layout-lf" style="margin-top: 10px;" @keyup.enter="login">
          <button type="button" class="v-button v-button--primary v-button--large" style="margin-top: 10px;width: 100%;" @click="login">
             <span>登录</span>
         </button>
         </div>
       
       </div>
  </div>
    
</template>
<style lang="stylus">
.authcenter-body-login {
    width: 286px;
    margin : 200px auto;
    position: relative;
}
 /* 普通输入框35px */
 input{
 height:35px 
 padding:6px 12px
 border-radius: 4px;
 border: 1px solid #bfcbd9;
 box-sizing: border-box;
 color: #1f2d3d;
 display: inline-block;
 }
 layout-lf{
     float:left
 }
 /* 获取焦点输入框颜色 */
 input:focus{
    outline: none;
    border-color: #20a0ff;
 }
 .v-button{
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #bfcbd9;
    border-color: #c4c4c4;
    color: #1f2d3d;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 4px;
 }
.v-button--primary{
    color: #fff;
    background-color: #20a0ff;
    border-color: #20a0ff;
}
.v-button--large {
    padding: 11px 19px;
    font-size: 16px;
    border-radius: 4px;
}
 .title
     text-align:center
     font-size 25px  
</style>
<script>
import {userLogin} from '../api/index'
export default {
  name: 'hello',
  data () {
    return {
      value: [20, 50],
      ruleForm: {
        userName: '',
        userPwd: ''
      }
    }
  },
  methods: {
    login () {
      console.log(this.ruleForm.userName)
      console.log(this.ruleForm.userPwd)
      var params = {userName: this.ruleForm.userName, passWord: this.ruleForm.userPwd}
      userLogin(params).then(res => {
        if (res.status === 1) {
          console.log('error')
          this.open6()
        } else {
          this.$router.push({ path: '/home' })
        }
      })
    },
    open6 () {
      this.$notify.error({
        title: '提示',
        message: '用户名或密码错误'
      })
    }
  }
}
</script>



